<template>
    <div id="container"></div>
</template>

<script setup>
import { Line } from '@antv/g2plot'
import { onMounted } from 'vue';
const data = [
  { date: '01-01', value: 30 },
  { date: '01-02', value: 40 },
  { date: '01-03', value: 30 },
  { date: '01-04', value: 50 },
  { date: '01-05', value: 50 },
  { date: '01-06', value: 60 },
  { date: '01-07', value: 70 },
  { date: '01-08', value: 90 },
  { date: '01-09', value: 130 },
]

onMounted(() => {
  const line = new Line('container', {
    data,
    xField: 'date',
    yField: 'value',
  })
  line.render()
  line.update({theme: {background: '#FFFFFF'},})
})
</script>